import { Button, Space, Tabs, message } from 'antd';
import React, { memo, useMemo, useRef, useState } from 'react';

import { CopyToClipboard } from 'react-copy-to-clipboard';
import ReactMonacoEditor from 'react-monaco-editor';
import { toMagicianEnumCode } from './toMagicianEnumCode';
import { toReactHooksCode } from './toReactHooksCode';
import { useFullscreen } from 'ahooks';
import variables from '../../../../../lib/themeVariables';

const ToCode = ({ data }) => {
  const editorRef = useRef(null);

  const [isFullscreen, { toggleFull }] = useFullscreen(editorRef);
  const [activeKey, setActiveKey] = useState('enum');
  const changeHandle = (key) => {
    setActiveKey(key);
  };
  const code = useMemo(() => {
    if (activeKey === 'enum') return toMagicianEnumCode(data);
    return toReactHooksCode(data);
  }, [activeKey, data]);

  const copyHandle = () => {
    message.success('复制成功！');
  };
  return (
    <div>
      <Space style={{ marginBottom: variables.space }}>
        <Button onClick={toggleFull}>全屏</Button>
        <CopyToClipboard text={code} onCopy={copyHandle}>
          <Button type="primary">复制</Button>
        </CopyToClipboard>
      </Space>
      <div ref={editorRef}>
        <Tabs activeKey={activeKey} onChange={changeHandle}>
          <Tabs.TabPane tab="js编程枚举" key="enum"></Tabs.TabPane>
          <Tabs.TabPane tab="React hooks" key="hooks"></Tabs.TabPane>
        </Tabs>

        <ReactMonacoEditor
          width="100%"
          height={isFullscreen ? window.screen.availHeight : '800'}
          theme="vs-dark"
          language="shell"
          value={code}
          options={{
            readOnly: true,
            fontSize: 14,
            folding: true,
            tabSize: 2,
          }}
        />
      </div>
    </div>
  );
};

export default memo(ToCode);
